<template>
  <div>
    <el-form ref="form" label-width="80px" style="text-align: left;">
      <el-form-item label="起始日期">
        <el-date-picker v-model="startDate" type="date" placeholder="选择起始日期" @change="filterChange"></el-date-picker>
      </el-form-item>

      <el-form-item label="结束日期">
        <el-date-picker v-model="endDate" type="date" placeholder="选择结束日期" @change="filterChange"></el-date-picker>
      </el-form-item>

      <el-form-item label="职位">
        <el-select v-model="position" filterable placeholder="请选择" @change="filterChange">
          <el-option
            v-for="item in position_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="学历">
        <el-select v-model="education" placeholder="请选择学历" @change="filterChange">
          <el-option
            v-for="item in edu_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="经验">
        <el-select v-model="experience" placeholder="请选择经验" @change="filterChange">
          <el-option
            v-for="item in exp_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="城市">
        <el-select v-model="city" placeholder="请选择城市" @change="filterChange">
          <el-option
            v-for="item in city_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认提交</el-button>
      </el-form-item>
    </el-form>

    <div class="graph" v-if="show_graph">
      <jobTimeNetIncrement :netIncreace="search_data" />
      <jobTimeMoMIncrement :momIncreace="search_data" />
      <positionSalaryChart :positionSalary="search_data" />
      <eduGraph :search_data="search_data"></eduGraph>
      <expGraph :search_data="search_data"></expGraph>
    </div>
  </div>
</template>

<script>
import { requestChartGetTerm } from "@/api/index.js";
import JobTimeNetIncrement from "@/components/JobTimeNetIncrement";
import JobTimeMoMIncrement from "@/components/JobTimeMoMIncrement";
import PositionSalaryChart from "@/components/PositionSalaryChart";

export default {
  name: "ChartHome",
  components: {
    jobTimeNetIncrement: JobTimeNetIncrement,
    jobTimeMoMIncrement: JobTimeMoMIncrement,
    positionSalaryChart: PositionSalaryChart,
    eduGraph: () => import("@/components/SummaryGraph/EduAndTime"),
    expGraph: () => import("@/components/SummaryGraph/ExpAndTime")
  },
  data() {
    return {
      show_graph: false,
      search_data: {},
      position: "",
      education: "",
      experience: "",
      city: "",
      startDate: "",
      endDate: "",
      position_options: [],
      edu_options: [],
      exp_options: [],
      city_options: []
    };
  },
  methods: {
    filterChange: function() {
      let vue = this;

      if (this.startDate == "" || this.endDate == "") {
      } else {
        if (this.compareDate()) {
          this.search_data = {
            position: this.position,
            education: this.education,
            experience: this.experience,
            city: this.city,
            startDate: this.startDate,
            endDate: this.endDate
          };
        } else {
          vue.$message.info("查询结束日期小于起始日期，请重新选择");
        }
      }
    },
    compareDate: function() {
      if (this.startDate.getTime() <= this.endDate.getTime()) {
        return true;
      } else {
        return false;
      }
    },
    onSubmit: function() {
      let vue = this;
      if (
        this.position == "" ||
        this.education == "" ||
        this.experience == "" ||
        this.city == "" ||
        this.startDate == "" ||
        this.endDate == ""
      ) {
        vue.$message.info("查询条件不完整，请选择查询的条件");
      } else if (this.compareDate() == false) {
        vue.$message.info("查询结束日期小于起始日期，请重新选择");
      } else {
        this.search_data = {
          position: this.position,
          education: this.education,
          experience: this.experience,
          city: this.city,
          startDate: this.startDate,
          endDate: this.endDate
        };
        this.show_graph = true;
      }
    }
  },
  created: function() {
    requestChartGetTerm().then(data => {
      let vue = this;
      let position_term = data.result.position;
      position_term.forEach(element => {
        vue.position_options.push({ value: element, label: element });
      });

      let edu_term = data.result.edu;
      edu_term.forEach(element => {
        vue.edu_options.push({ value: element, label: element });
      });

      let exp_term = data.result.exp;
      exp_term.forEach(element => {
        vue.exp_options.push({ value: element, label: element });
      });

      let city_term = data.result.city;
      city_term.forEach(element => {
        vue.city_options.push({ value: element, label: element });
      });
    });
  }
};
</script>

<style>
.el-select {
  width: 100%;
}
.el-cascader {
  width: 100%;
}
.el-form-item {
  margin-top: 5px;
  margin-bottom: 5px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
